<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>翻页</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding: 30px;
        }

    </style>
</head>
<body>
<div class="container">
    <!--pagination 分页 原理：1、设置li元素的内敛显示和边框属性。2、设置第一个和最后一个圆角-->
    <!--<ul class="pagination">-->
        <!--&lt;!&ndash;disabled 禁用状态&ndash;&gt;-->
        <!--<li class="disabled"><a href="#">&laquo;</a></li>-->
        <!--&lt;!&ndash;active当前页&ndash;&gt;-->
        <!--<li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>-->

    <!--pager翻页效果，实现步骤：1、整体居中 2、li有圆角 3、设置鼠标移动上去的效果 4、支持a元素的span元素-->
    <!--<ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>-->

    <!--pager翻页效果 -->
    <ul class="pager">
        <li class="previous disabled"><a href="#">上一页</a></li>
        <li class="next"><a href="#">下一页</a></li>
    </ul>
</div>

</body>
</html>